<%inherit file="base.html" />
<%def name="online_help_token()"><% return "grading" %></%def>
<%block name="title">${_("Grading Settings")}</%block>
<%block name="bodyclass">is-signedin course grading view-settings</%block>

<%namespace name='static' file='static_content.html'/>
<%!
  import json
  from contentstore import utils
  from django.utils.translation import ugettext as _
  from models.settings.encoder import CourseSettingsEncoder
  from openedx.core.djangolib.js_utils import (
      dump_js_escaped_json, js_escaped_string
  )
%>

<%block name="header_extras">
% for template_name in ["course_grade_policy", "course_grade_cutoff"]:
  <script type="text/template" id="${template_name}-tpl">
    <%static:include path="js/${template_name}.underscore" />
  </script>
% endfor
</%block>

<%block name="jsextra">
  <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
</%block>
<%block name="requirejs">
    require(["js/factories/settings_graders"], function(SettingsGradersFactory) {
        SettingsGradersFactory(
            _.extend(${dump_js_escaped_json(course_details, cls=CourseSettingsEncoder) | n},
                {is_credit_course: ${is_credit_course | n, dump_js_escaped_json}}),
            "${grading_url | n, js_escaped_string}"
        );
    });
</%block>

<%block name="content">
<div class="wrapper-mast wrapper">
  <header class="mast has-subtitle">
    <h1 class="page-header">
      <small class="subtitle">${_("Settings")}</small>
      <span class="sr">&gt; </span>${_("Grading")}
    </h1>
  </header>
</div>

<div class="wrapper-content wrapper">
  <section class="content">
    <article class="content-primary" role="main">
      <form id="settings_details" class="settings-grading" method="post" action="">
        <section class="group-settings grade-range">
          <header>
            <h2 class="title-2">${_("Overall Grade Range")}</h2>
            <span class="tip">${_("Your overall grading scale for student final grades")}</span>
          </header>

          <ol class="list-input">
            <li class="field" id="field-course-grading-range">
              <div class="grade-controls course-grading-range well">
                <a href="#" class="new-grade-button"><span class="icon fa fa-plus" aria-hidden="true"></span><span class="sr">${_("Add grade")}</span></a>
                <div class="grade-slider" dir="ltr">
                  <div class="grade-bar">
                    <ol class="increments">
                      <li class="increment-0">0</li>
                      <li class="increment-10">10</li>
                      <li class="increment-20">20</li>
                      <li class="increment-30">30</li>
                      <li class="increment-40">40</li>
                      <li class="increment-50">50</li>
                      <li class="increment-60">60</li>
                      <li class="increment-70">70</li>
                      <li class="increment-80">80</li>
                      <li class="increment-90">90</li>
                      <li class="increment-100">100</li>
                    </ol>
                    <ol class="grades">
                    </ol>
                  </div>
                </div>
              </div>
            </li>
          </ol>
        </section>
        <hr class="divide" />

        % if settings.FEATURES.get("ENABLE_CREDIT_ELIGIBILITY", False) and is_credit_course:
          <section class="group-settings grade-rules">
            <header>
              <h2 class="title-2">${_("Credit Eligibility")}</h2>
              <span class="tip">${_("Settings for course credit eligibility")}</span>
            </header>

            <ol class="list-input">
              <li class="field text" id="field-course-minimum_grade_credit">
                <label for="course-minimum_grade_credit">${_("Minimum Credit-Eligible Grade:")}</label>
                <input type="text" class="short time input-minimum-grade" id="course-minimum_grade_credit" value="0" placeholder="80" autocomplete="off" aria-describedby="minimum_grade_description"/>
                <span class="minimum-grade-percentage-sign">%</span>
                <span class="tip tip-inline" id="minimum_grade_description">${_("Must be greater than or equal to the course passing grade")}</span>
              </li>
            </ol>
          </section>
          <hr class="divide" />
        % endif

        <section class="group-settings grade-rules">
          <header>
            <h2 class="title-2">${_("Grading Rules &amp; Policies")}</h2>
            <span class="tip">${_("Deadlines, requirements, and logistics around grading student work")}</span>
          </header>

          <ol class="list-input">
            <li class="field text" id="field-course-grading-graceperiod">
              <label for="course-grading-graceperiod">${_("Grace Period on Deadline:")}</label>
              <input type="text" class="short time" id="course-grading-graceperiod" value="00:00" placeholder="HH:MM" autocomplete="off" />
              <span class="tip tip-inline">${_("Leeway on due dates")}</span>
            </li>
          </ol>
        </section>
        <hr class="divide" />

        <section class="group-settings assignment-types">
          <header>
            <h2 class="title-2">${_("Assignment Types")}</h2>
            <span class="tip">${_("Categories and labels for any exercises that are gradable")}</span>
          </header>

          <ol class="list-input course-grading-assignment-list enum">

          </ol>

          <div class="actions">
            <a href="#" class="new-button new-course-grading-item add-grading-data">
              <span class="icon fa fa-plus" aria-hidden="true"></span> ${_("New Assignment Type")}
            </a>
          </div>
        </section>
      </form>
    </article>

    <aside class="content-supplementary" role="complementary">
      <div class="bit">
        <h3 class="title-3">${_("What can I do on this page?")}</h3>
        <p>${_("You can use the slider under Overall Grade Range to specify whether your course is pass/fail or graded by letter, and to establish the thresholds for each grade.")}</p>

        <p>${_("You can specify whether your course offers students a grace period for late assignments.")}</p>
      	<p>${_("You can also create assignment types, such as homework, labs, quizzes, and exams, and specify how much of a student's grade each assignment type is worth.")}</p>

      </div>

      <div class="bit">
      % if context_course:
        <%
          detailed_settings_url = utils.reverse_course_url('settings_handler', context_course.id)
          course_team_url = utils.reverse_course_url('course_team_handler', context_course.id)
          advanced_settings_url = utils.reverse_course_url('advanced_settings_handler', context_course.id)
        %>
        <h3 class="title-3">${_("Other Course Settings")}</h3>
        <nav class="nav-related" aria-label="${_('Other Course Settings')}">
          <ul>
            <li class="nav-item"><a href="${detailed_settings_url}">${_("Details &amp; Schedule")}</a></li>
            <li class="nav-item"><a href="${course_team_url}">${_("Course Team")}</a></li>
            <li class="nav-item"><a href="${utils.reverse_course_url('group_configurations_list_handler', context_course.id)}">${_("Group Configurations")}</a></li>
            <li class="nav-item"><a href="${advanced_settings_url}">${_("Advanced Settings")}</a></li>
          </ul>
        </nav>
      % endif
      </div>
    </aside>
  </section>
</div>
</%block>
